<template>
  <!-- 导师列表 -->
  <view class="page">
    <nav-bar
      :navTitle="title"
      iconColor="#000"
      :backgroundColor="backgroundColor"
      :isBackgroundColor="false"
    ></nav-bar>
    <view class="casing">
      <view class="process bg-white">
        <view class="title f-s-32 col-272 fw-600">正在学习的课程</view>
        <view class="card flex" v-for="(item, index) in process" :key="index">
          <image :src="item.img" class="video" mode="scaleToFill" />
          <view class="content flex flex-column justify-between">
            <view class="brief text-one f-s-32 fw-600">{{ item.brief }}</view>
            <view>
              <view class="plan col-a1a f-s-28 fw-600"
                ><text class="mr6">已学习</text>{{ item.plan }}%</view
              >
              <view class="longStrip bg-a1a"></view>
            </view>
          </view>
        </view>
      </view>
      <view class="process bg-white">
        <view class="title f-s-32 col-272 fw-600">已完成的课程</view>
        <view class="card flex" v-for="(item, index) in finish" :key="index">
          <image :src="item.img" class="video" mode="scaleToFill" />
          <view class="content flex flex-column justify-between">
            <view class="brief text-one f-s-32 fw-600">{{ item.brief }}</view>
            <view>
              <view class="plan col-a7f f-s-28 fw-600">{{ item.plan }}</view>
              <view class="longStrip bg-a7f"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import navBar from "@/components/navBar";
export default {
  components: {
    navBar,
  },
  data() {
    return {
      title: "学习记录",
      backgroundColor: "#fff",
      process: [
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel2.png",
          brief: "国际关系的理论和实践的重大创新",
          plan: 60,
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel2.png",
          brief: "国际关系的理论和实践的重大创新",
          plan: 60,
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel2.png",
          brief: "国际关系的理论和实践的重大创新",
          plan: 60,
        },
      ],
      finish: [
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel2.png",
          brief: "国际关系的理论和实践的重大创新",
          plan: "已完成",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel2.png",
          brief: "国际关系的理论和实践的重大创新",
          plan: "已完成",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/carousel2.png",
          brief: "国际关系的理论和实践的重大创新",
          plan: "已完成",
        },
      ],
    };
  },
  onLoad(options) {},
  methods: {},
};
</script>

<style scoped lang="scss">
.process {
  padding: 28rpx 0rpx 8rpx 0rpx;
  margin: 20rpx 24rpx;
  border-radius: 24rpx;
  .title {
    padding: 0rpx 38rpx 20rpx 38rpx;
    border-bottom: 2rpx solid #f6f6f6;
  }
  .card {
    padding: 26rpx 38rpx;
    .video {
      width: 144rpx;
      height: 150rpx;
      border-radius: 10rpx;
    }
    .content {
      margin-left: 22rpx;
      padding: 12rpx 0rpx;
      .longStrip {
        margin-top: 13rpx;
        width: 406px;
        height: 10rpx;
        border-radius: 6rpx;
      }
    }
  }
}
.bg-a1a {
  background: #c11a1a;
}
.col-a1a {
  color: #c11a1a;
}
.col-a7f {
  color: #61da7f;
}
.bg-a7f {
  background: #61da7f;
}
.mr6 {
  margin-right: 6rpx;
}
.casing {
  padding-bottom: 40rpx;
}
</style>
